<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title><%= class_name %></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
    <!-- jQuery -->
    <script type="text/javascript" src="/public/libs/jquery-3.5.1/jquery-3.5.1.min.js"></script>

    <!-- Popper -->
    <script type="text/javascript" src="/public/libs/popper-2.4.0/popper-2.4.0.min.js"></script>

    <!-- Bootstrap -->
    <script type="text/javascript" src="/public/libs/bootstrap-4.4.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/public/libs/bootstrap-4.4.1-dist/css/bootstrap.min.css">

    <!-- feather icons -->
    <script src="/public/libs/feather/js/feather.min.js"></script>

    <script type="text/javascript" src="/public/api/rhoapi-modules.js"></script>
    <script type="text/javascript" src="/public/api/rhoapi-modules-ORM.js"></script>
    <script type="text/javascript" src="/public/api/rhoapi-modules-ORMHelper.js"></script>
    <script type="text/javascript" src="/public/api/rhoapi-modules-Ruby-RunTime.js"></script>

    <script type="text/javascript" src="../index.js"></script>
</head>

<body>

<div class="border d-flex justify-content-between">
    <a id="back" href="#" class="m-1 btn btn-secondary btn-sm">Back</a>

    <h3>Settings</h3>

    <span></span>
</div>

<div class="container-fluid">

    <div id="alert" class="alert hidden">
        <strong id="title"></strong>&nbsp;<span id="text"></span>
    </div>


    <% if @rhoconnectclient_ext %>
    <div id="rhoconnectClientOptions" class="list-group">

        <li class="list-group-item">
            <div class="row">
                <div class="col-6">
                    <span pull-right><strong>Client ID:</strong></span>
                </div>
                <div id="clientId" class="col-6">
                </div>
            </div>
        </li>

        <li id="resetDatabaseItem" class="list-group-item list-group-item-action d-flex justify-content-between">
            <span class=" text-danger">Reset Database</span>
            <i data-feather="chevron-right"></i>            
        </li>

        <li id="performSyncItem" class="list-group-item list-group-item-action d-flex justify-content-between">
            Perform Sync
            <i data-feather="chevron-right"></i>
        </li>

        <li id="logoutItem" class="list-group-item list-group-item-action d-flex justify-content-between">
            Logout
            <i data-feather="chevron-right"></i>            
        </li>

        <a id="loginItem" href="login.html" class="list-group-item list-group-item-action d-flex justify-content-between">
            Login
            <i data-feather="chevron-right"></i>
        </a>

    </div>
    <% end %>


</div>

<div class="modal" id="resetDatabaseModalDialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Reset Database</h4>
            </div>
            <div class="modal-body">
                <div class="text-center alert alert-warning">
                    <h4 class="text-center">Are you sure?</h4>

                    <p>Resetting removes all objects from your device.</p>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-warning" data-dismiss="modal">Confirm</button>
            </div>
        </div>
    </div>
</div>

<script>
    window.addEventListener("load", function () {
        var page = new App.SettingsPage();
        page.init();
    });
</script>
</body>
</html>
